<template>
  <div class="mine-page">
    <div class="user-info">
      <!--已登陆-->
      <div class="user" v-if="userIcon">
        <img :src="userIcon">
      </div>
      <!--未登陆-->
      <div class="btn-login" v-else>
        <a href="/pages/login/main">
          <span>登陆</span>
        </a>
      </div>
    </div>
    <ul class="">
      <li>
        <a href="/pages/mine-join/main">
          <img src="/static/img/mine/mine.png" class="icon" mode="aspectFit">
          <em>我参与的团</em>
          <span class="iconfont">&#xe600;</span>
        </a>
      </li>
      <li>
        <a href="/pages/user-info/main">
          <img src="/static/img/mine/address.png" class="icon" mode="aspectFit">
          <em>收货地址</em>
          <span class="iconfont">&#xe600;</span>
        </a>
      </li>
      <li>
        <a href="/pages/help/main">
          <img src="/static/img/mine/help.png" class="icon" mode="aspectFit">
          <em>帮助</em>
          <span class="iconfont">&#xe600;</span>
        </a>
      </li>
      <li>
        <a href="/pages/feedback/main">
          <img src="/static/img/mine/fankui.png" class="icon" mode="aspectFit">
          <em>反馈</em>
          <span class="iconfont">&#xe600;</span>
        </a>
      </li>
    </ul>

    <tab-bar />
  </div>
</template>

<script>
import TabBar from '@/components/TabBar'
import { userLogin } from '@/utils/index'
export default {
  name: '',
  data () {
    return {
      userIcon: ''
    }
  },
  components: {
    TabBar
  },
  methods: {
    navClick (link) {
      wx.navigateTo({
        url: link
      })
    }
  },
  mounted () {
    userLogin()
  },
  onShow () {
    this.userIcon = wx.getStorageSync('userIcon')
  }
}
</script>

<style lang="stylus" scoped>
.iconfont {
  color: #b2b2b2
  font-size: 24rpx
  margin-right: 10rpx
}
.mine-page {
  padding: 0 22rpx 0 50rpx
}

.btn-login {
  width: 170rpx
  height: 170rpx
  margin: 0 auto
  border-radius: 50%
  background: #F88E4E
  span {
    color: #ffffff
    font-size: 32rpx
    text-align: center
    line-height: 170rpx
    display: block
  }
}
.user-info {
  padding-top: 78rpx
  .user {
    overflow: hidden
    img {
      width: 170rpx
      height: 170rpx
      border-radius: 50%
      margin: 0 auto
    }
    .name {
      color: #131313
      fleoat: left
      line-height: 96rpx
      font-size: 30rpx
      margin-left: 34rpx
    }
    .address {
      color: #b2b2b2
      line-height: 96rpx
      font-size: 30rpx
      float: right
      i {
        display inline
      }
    }
  }
}
ul {
  margin-top: 32rpx
  li {
    overflow: hidden
    position: relative
    border-bottom: 1px solid #f3f3f3
    .icon {
      top: 50%
      transform: translateY(-50%)
      position: absolute
      width: 52rpx
      height: 52rpx
    }
    a {
      overflow: hidden
    }
    em {
      float: left
      font-size: 34rpx
      color: #131313
      margin-left: 82rpx
      line-height: 120rpx
    }
    span {
      float: right
      color: #8C8C8C
      line-height: 120rpx
    }
  }
}
</style>
